<template>
	<view class="relative" style="position: relative;">
		<view class="diamondMall_head p20 flex-between flex1" :style="{ background: bg_color}">
			<view class="">
				<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
					@click="backmarket()"></image>
			</view>
			<view class="size-30 center" :style="{opacity:textcolor}" style="margin: 0 280rpx 0 0;">
				{{title}}
			</view>
		</view>
		<image :src="require('@/static/home/raffle_bg.png')" mode="widthFix" class="bg_image" style="width: 100%;">
		</image>
		<view class="" style='height: 400rpx;'>

		</view>

		<view class="rafflePage_change_title">
			你还有{{count}}次抽奖机会
		</view>
		<!-- 中间的盘 -->
<!-- 		<view class="" style="position: absolute;z-index: 1;left: 68px;top: 287px;">
			  <image src="../../static/home/raffle_center.png" mode="" style="width: 240px; height: 235px;"></image>
		</view> -->
		<view class="" style="width:265px;height: 360px;margin: 0 auto;">
			<image class="photo mt-40 zuanzuan" style="" src='../../static/home/raffle_1.png' mode="" ></image>
		</view>
 
		<view class="flex1 flex-between mt-40">
			<view class="" style="width: 260rpx;height: 20rpx;">
				<image class="photo" src="../../static/home/left.png" mode=""></image>
			</view>
			<view class="white">
				抽奖规则
			</view>
			
			<view class="" style="width: 260rpx;height: 20rpx;">
				<image class="photo" src="../../static/home/right.png" mode=""></image>
			</view>
		</view>
		<view class="white p20 size-28">
			<view class="">
				1.点击链接进入活动页面每人每天有0次抽奖机会。
			</view>
			<view class="mt-30">
				2.起止活动时间为{{create_time}}——{{e_date}}
			</view>
			<view class="mt-20">
				3.此活动最终解释权为本公司所有。
			</view>
		</view> 
 
			<view class="zhuan flexCenter" style="z-index: 2;">
			<image :src="require('@/static/home/raffle_center.png')" mode="aspectFill" class="zhuanBox"
				:class="{'rotate':isRotate}" :style="{transform:`rotate(${angle}deg)`}"
				style="width:480rpx;height:480rpx;"></image>
			<image :src="require('@/static/home/raffleButton.png')" mode="widthFix" @click="rotate()" class="an"
				style="width:218rpx;height:218rpx;"></image>
			</view>

		<!-- <view>1. 注册或未参与过此活动的用户</view>
		<view>2. 红包奖励直接到用户账号，可以用于商城购物</view>
		<view>3. 参与活动时，需要分享给好友一起参与</view> -->
		<!-- 	<view class="" style="position: absolute;">
		<view class="">
			  <image src='../../static/home/left.png' mode=""></image>
		</view>
		<view class="">
			  <image src='../../static/home/right.png' mode=""></image>
		</view>
	</view> -->
	</view>
</template>

<script>
	//生成随机数（下面也有一个）
	function rand(min, max) {
		return parseInt(Math.random() * (max - min + 1) + min);
	}
	export default {
		data() {
			return {
				create_time:'',
				e_date:"",
				count: '',
				title: '',
				textcolor: '0',
				bg_color: '',
				isRotate: false, //是否旋转
				prizeList: ['积分', '新人红包', '精选好券', '谢谢参与', '积分', '新人红包', '惊喜礼包', '新人红包'], //奖品列表，决定旋转角度
				angle: 0, //旋转角度
			}
		},
		onShow() {
			this.$http('api/activity/detail', {
				id: 2
			}).then(res => {
				console.log(res);
				this.title = res.title
				this.count = res.count
				this.create_time=res.create_time
				this.e_date=res.e_date
				this.thumb=res.thumb

			});
			this.$http('api/activity/drawList', {
			}).then(res => {
				console.log(res);
			
			});
		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = '0'
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);
			//#ifdef H5
			this.isF = true
			// #endif
			// #ifndef H5
			if (this.yuanH > e.scrollTop) {
				this.isF = false
			} else {
				this.isF = true
			}
			// #endif
		},
		methods: {
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/index'
				})
			},
			rotate() {
				if (this.isRotate) return;
				this.angle = 0;
				setTimeout(() => {
					let len = this.prizeList.length;
					let num = rand(0, len - 1); //随机奖品，可以改成后端返回的。
					// let num=7;	//随机奖品，可以改成后端返回的。
					let prize = this.prizeList[num];
					// let angle=360/8*num+rand(0,44);//不排除转到中间线
					let angle = 360 / len * num + rand(4, 40); //排除转到中间线
					this.angle = (8 * 360 + angle); //旋转圈数8 + 奖品角度
					console.log('奖品：', prize, num, angle, this.angle, len)
					this.isRotate = true;
					setTimeout(() => {
						this.isRotate = false;
						uni.showToast({
							title: prize,
							icon: 'none',
							duration: 3000
						})
					}, 5000)
				}, 300)
			}
		}
	}
</script>

<style lang="less" scoped>
	.zuanzuan{
		
	}
	.bg_image {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.rafflePage_change_title {
		margin: 0 auto;
		z-index: 111;

		color: #FFF;
		background-image: linear-gradient(to right, #F337FD, #6305A7);
		width: 210px;
		height: 50px;
		text-align: center;
		line-height: 50px;
		border-radius: 30px;
		border: 3px solid #A945E3;
	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		background-image: #FFF;
	}

	.zhuan {
		position: absolute;
		top: 35.5%;
		left: 32%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.zhuanBox {
		position: absolute;
		width: 240px;
		height: 240px;
		transform: rotate(3027deg);
		top: 60px;
		left: 0px;
	}

	.an {
		position: relative;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		width: 109px;
		height: 118px;
		top: 110px;
		left: 68px;
	}

	.an:active {
		transform: scale(0.95);

	}

	.rotate {
		transform: rotate(3800deg);
		transition: transform 5s ease;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			/* transform: rotate(360deg); */
			transform: rotate(3800deg);
		}
	}
</style>
